<template>
	<view 
		class="img-wrap" 
		:style="{width: widthStr,height: heightStr, borderRadius: radiusStr}"
	>
		<image 
			:style="{width: widthStr,height: heightStr}"
			:mode="mode"
			:src="src"
			@error="error"
			@load="loaded"
			@click="imageClick"
			v-if="!isError || !src"
		/>
		<view class="img-slot" v-if="isLoading && isNeedLoading">
			<image class="img-loading" mode="widthFix" src="/uni_modules/hbxw-image/static/hbxw-image/loading.png" />
		</view>
		<view class="img-slot" v-if="isError && isNeedError">
			<image mode="widthFix" src="/uni_modules/hbxw-image/static/hbxw-image/error.png" />
		</view>
	</view>
</template>

<script>
	export default {
		name:"hbxw-image",
		props: {
			// 图片宽
			width: {
				type: [String,Number],
				default: '128rpx' 
			},
			// 图片高
			height: {
				type: [String,Number],
				default: '128rpx' 
			},
			// 图片填充模式
			mode: {
				type: String,
				validator: (value) => {
					return ['scaleToFill','aspectFit','aspectFill','widthFix','heightFix','top','bottom','center','left','right','top left','top right','bottom left','bottom right'].indexOf(value) !== -1;
				},
				default: 'scaleToFill'
			},
			// 图片url
			src: {
				type: String,
				default: '' 
			},
			// 图片圆角
			radius: {
				type: [String,Number],
				default: 0
			},
			// 当前预览图片索引
			previewIndex: {
				type: Number,
				default: 0
			},
			// 预览图片urls
			priviewList: {
				type: Array,
				default: () => null
			},
			// 是否需要开启预览图片功能
			isNeedPriview: {
				type: Boolean,
				default: false
			},
			// 是否需要loading占位效果
			isNeedLoading: {
				type: Boolean,
				default: true
			},
			// 是否需要图片错误占位图
			isNeedError: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			widthStr() {
				if (typeof this.width === 'number') {
					return this.width + 'px'
				}
				return this.width;
			},
			heightStr() {
				if (typeof this.height === 'number') {
					return this.height + 'px'
				}
				return this.height;
			},
			radiusStr() {
				if (typeof this.radius === 'number') {
					return this.radius + 'px'
				}
				return this.radius;
			}
		},
		data() {
			return {
				isLoading: true,
				isError: false
			};
		},
		methods: {
			error(err) {
				this.isLoading = false;
				this.isError = true;
				this.$emit('error', err);
			},
			loaded(res) {
				this.isLoading = false;
				this.$emit('load', res);
			},
			// 图片预览
			imageClick() {
				if (!this.priviewList && !this.isNeedPriview) {
					return;
				}
				if (this.isError) {
					return;
				}
				uni.previewImage({
					urls: this.priviewList ? this.priviewList : [this.src],
					current: this.previewIndex ? this.previewIndex : 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.img-wrap{
	overflow: hidden;
	position: relative;
}
@keyframes rotateImg {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
.img-slot{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	image{
		width: 32px;
		max-width: 50%;
		height: auto;
	}
	.img-loading{
		animation: rotateImg .4s linear 0s infinite;
	}
}
</style>